<style lang="less">
</style>
<template>
    <div style="display: flex; position: relative">
        <Form
                ref="ossForm"
                :model="oss"
                :label-width="110"
                label-position="left"
                :rules="ossValidate"
        >
            <FormItem label="服务提供商" prop="serviceName">
                <Select
                        v-model="oss.serviceName"
                        @on-change="changeOss"
                        placeholder="请选择"
                        style="width: 230px"
                >
                    <Option value="LOCAL_OSS">本地服务器</Option>
                    <Option value="MINIO_OSS">MinIO</Option>
                    <Option value="QINIU_OSS">七牛云</Option>
                    <Option value="ALI_OSS">阿里云</Option>
                    <Option value="TENCENT_OSS">腾讯云</Option>
                </Select>
            </FormItem>
            <div v-if="oss.serviceName != 'LOCAL_OSS'">
                <FormItem label="accessKey" prop="accessKey">
                    <Input
                            type="text"
                            v-model="oss.accessKey"
                            placeholder="请输入accessKey/secretId"
                            style="width: 380px"
                            :disabled="changeLoading"
                    />
                </FormItem>
                <FormItem label="secretKey" prop="secretKey">
                    <Tooltip placement="right" content="无法编辑时请先点击查看图标">
                        <Input
                                class="input-see"
                                type="text"
                                v-model="oss.secretKey"
                                :disabled="changeLoading"
                                :readonly="!changedOssSK"
                                @on-click="seeSecret(oss.serviceName)"
                                icon="ios-eye"
                                placeholder="请输入secretKey"
                                style="width: 380px"
                        />
                    </Tooltip>
                </FormItem>
                <FormItem
                        v-if="oss.serviceName == 'QINIU_OSS'"
                        label="zone存储区域"
                        prop="zone">
                    <Select
                            v-model="oss.zone"
                            placeholder="请选择存储区域"
                            style="width: 380px"
                            :disabled="changeLoading">
                        <Option :value="-1">自动判断</Option>
                        <Option :value="0">华东</Option>
                        <Option :value="1">华北</Option>
                        <Option :value="2">华南</Option>
                        <Option :value="3">北美</Option>
                        <Option :value="4">东南亚</Option>
                    </Select>
                </FormItem>
                <FormItem label="bucket空间" prop="bucket">
                    <Input
                            type="text"
                            v-model="oss.bucket"
                            placeholder="请输入bucket空间名"
                            style="width: 380px"
                            :disabled="changeLoading"
                    />
                </FormItem>
                <FormItem
                        v-if="oss.serviceName == 'TENCENT_OSS'"
                        label="所属地域"
                        prop="bucketRegion">
                    <dict
                            dict="tencent_bucket_region"
                            v-model="oss.bucketRegion"
                            placeholder="请选择或输入搜索"
                            filterable
                            :disabled="changeLoading"
                            transfer/>
                </FormItem>
                <FormItem label="endpoint域名" prop="endpoint" :error="errorMsg">
                    <Input
                            type="text"
                            v-model="oss.endpoint"
                            :placeholder="endpointPH"
                            style="width: 380px"
                            :disabled="changeLoading">
                        <Select
                                v-model="oss.http"
                                slot="prepend"
                                style="width: 80px"
                                prop="http">
                            <Option value="http://">http://</Option>
                            <Option value="https://">https://</Option>
                        </Select>
                    </Input>
                </FormItem>
            </div>
            <div v-else>
                <FormItem label="存储磁盘路径" prop="filePath" :error="errorMsg2">
                    <Input
                            type="text"
                            v-model="oss.filePath"
                            placeholder="例如D:/upload"
                            style="width: 380px"
                            :disabled="changeLoading"/>
                </FormItem>
                <FormItem label="文件预览接口" prop="endpoint" :error="errorMsg">
                    <Input
                            type="text"
                            v-model="oss.endpoint"
                            placeholder="请输入文件预览接口"
                            style="width: 380px">
                        <Select
                                v-model="oss.http"
                                slot="prepend"
                                style="width: 80px"
                                prop="http"
                                :disabled="changeLoading">
                            <Option value="http://">http://</Option>
                            <Option value="https://">https://</Option>
                        </Select>
                    </Input>
                </FormItem>
            </div>
            <FormItem>
                <Button
                        type="primary"
                        style="width: 100px"
                        :disabled="changeLoading"
                        :loading="saveLoading"
                        @click="saveEditOss">保存并启用
                </Button>
            </FormItem>
        </Form>
        <Spin fix v-if="loading"></Spin>
    </div>
</template>

<script>
    import {checkOssSet, editOssSet, getOssSet, seeSecretSet} from "@/api/index";
    import dict from "@/views/my-components/mrdeer/dict";

    export default {
        name: "oss",
        components: {
            dict,
        },
        data() {
            return {
                loading: false, // 表单加载状态
                changeLoading: false,
                saveLoading: false,
                errorMsg: "",
                errorMsg2: "",
                oss: {
                    serviceName: "",
                    accessKey: "",
                    secretKey: "",
                    endpoint: "",
                    bucket: "",
                    bucketRegion: "",
                    zone: null,
                },
                changedOssSK: false, // 是否修改oss的secrectKey
                ossValidate: {
                    // 表单验证规则
                    serviceName: [{required: true, message: "请选择", trigger: "change"}],
                    accessKey: [{required: true, message: "不能为空", trigger: "blur"}],
                    secretKey: [{required: true, message: "不能为空", trigger: "blur"}],
                    endpoint: [{required: true, message: "不能为空", trigger: "blur"}],
                    bucket: [{required: true, message: "不能为空", trigger: "blur"}],
                    zone: [
                        {
                            required: true,
                            type: "number",
                            message: "不能为空",
                            trigger: "change",
                        },
                    ],
                    bucketRegion: [
                        {required: true, message: "不能为空", trigger: "change"},
                    ],
                },
                endpointPH: "请输入空间访问域名",
            };
        },
        methods: {
            init() {
                this.initOssSet();
            },
            initOssSet() {
                this.loading = true;
                checkOssSet().then((res) => {
                    if (res.status==200 && res.result) {
                        let oss = res.result;
                        getOssSet(oss).then((res) => {
                            this.loading = false;
                            if (res.result) {
                                // 转换null为""
                                for (let attr in res.result) {
                                    if (res.result[attr] == null) {
                                        res.result[attr] = "";
                                    }
                                }
                                this.oss = res.result;
                            } else {
                                this.changedOssSK = true;
                            }
                        });
                    } else {
                        this.loading = false;
                        this.changedOssSK = true;
                    }
                });
            },
            changeOss(v) {
                if (v == "ALI_OSS") {
                    this.endpointPH = "请输入EndPoint(地域节点) 非Bucket域名";
                } else if (v == "TENCENT_OSS") {
                    this.endpointPH = "请输入完整请求域名";
                } else {
                    this.endpointPH = "请输入空间访问域名";
                }
                this.changeLoading = true;
                getOssSet(v).then((res) => {
                    this.changeLoading = false;
                    if (res.result) {
                        // 转换null为""
                        for (let attr in res.result) {
                            if (res.result[attr] == null) {
                                res.result[attr] = "";
                            }
                        }
                        this.oss = res.result;
                        this.changedOssSK = false;
                    } else {
                        this.oss = {serviceName: v};
                        if (this.oss.serviceName == "LOCAL_OSS") {
                            this.oss.http = "http://";
                            this.oss.endpoint = "127.0.0.1:9999/mrdeer/file/view";
                        }
                        this.changedOssSK = true;
                    }
                });
            },
            seeSecret(name) {
                if (!name) {
                    return;
                }
                seeSecretSet(name).then((res) => {
                    if (res.status==200) {
                        this.oss.secretKey = res.result;
                        this.changedOssSK = true;
                    }
                });
            },
            saveEditOss() {
                if (this.oss.serviceName == "LOCAL_OSS") {
                    if (!this.oss.http) {
                        this.errorMsg = "请选择http协议";
                        return;
                    } else {
                        this.errorMsg = "";
                    }
                    if (!this.oss.endpoint) {
                        this.errorMsg = "请输入文件预览接口";
                        return;
                    } else {
                        this.errorMsg = "";
                    }
                    if (!this.oss.filePath) {
                        this.errorMsg2 = "请输入存储磁盘路径";
                        return;
                    } else {
                        this.errorMsg2 = "";
                    }
                    editOssSet(this.oss).then((res) => {
                        this.saveLoading = false;
                        if (res.status==200) {
                            this.$Message.success("保存成功");
                        }
                    });
                } else {
                    this.$refs.ossForm.validate((valid) => {
                        if (valid) {
                            if (!this.oss.http) {
                                this.errorMsg = "请选择http协议";
                                return;
                            } else {
                                this.errorMsg = "";
                            }
                            this.saveLoading = true;
                            this.oss.changed = this.changedOssSK;
                            editOssSet(this.oss).then((res) => {
                                this.saveLoading = false;
                                if (res.status==200) {
                                    this.$Message.success("保存成功");
                                }
                            });
                        }
                    });
                }
            },
        },
        mounted() {
            this.init();
        },
    };
</script>